<template>
  <div class="record">
    <div class="material-product-title">成品记录</div>
    <!-- 搜索栏 -->
    <div class="material-product-search">
      <div class="material-product-search-input">
        <el-input
          placeholder="请输入关键词、名称、编号"
          suffix-icon="el-icon-search"
          v-model="keyword"
        >
        </el-input>
      </div>
      <div class="material-product-search-time">
        <el-date-picker
          v-model="timeData"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="material-product-search-submit">
        <el-button type="primary" @click="getFinishList">搜索</el-button>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="record-btns">
      <el-button type="primary" @click="isIssueShow = true">在线发布</el-button>
      <el-button type="success" @click="isRemitShow = true">汇出</el-button>
      <el-button type="info">设置组合商品</el-button>
      <el-button type="warning">取消组合商品</el-button>
      <el-select v-model="batchValue" clearable placeholder="批量操作">
        <el-option
          v-for="item in batchData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 数据列表 -->
    <div class="record-table">
      <el-table
        ref="multipleTable"
        border
        :data="recordData"
        height="520"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="recordSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="产品信息">
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          <template slot-scope="scope">
            <div class="product-information">
              <div class="product-information-name">
                产品名称：
                <span class="using-single-drug"> {{ scope.row.name }}</span>
              </div>
              <div class="product-information-name">
                产品分类：
                <span class="using-single-drug">{{
                  scope.row.cate_titles
                }}</span>
              </div>
              <div class="product-information-name">
                素材名称：
                <span class="using-single-drug">{{
                  scope.row.material_titles
                }}</span>
              </div>
              <div class="product-information-name">
                导出名称：
                <span class="using-single-drug">{{
                  scope.row.import_name
                }}</span>
              </div>
              <div class="product-information-name">
                合成编号：
                <span class="using-single-drug">{{
                  scope.row.synthetic_number
                }}</span>
              </div>
              <div class="product-information-name">
                成品编号：
                <span class="using-single-drug">{{
                  scope.row.complete_number
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品图片">
          <template slot-scope="scope">
            <div class="product-image">
              <div
                class="product-image-list"
                v-for="(img, imgIdx) in scope.row.img"
                :key="imgIdx"
              >
                <img class="image-100" :src="img" alt="" />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remit" label="汇出/发布店铺" width="120">
        </el-table-column>
        <el-table-column prop="order_num" label="出单数量" width="80">
        </el-table-column>
        <el-table-column prop="address" label="合成信息" width="100">
        </el-table-column>
        <el-table-column label="自定义分组" width="100">
          <template>
            <div class="group">未定义</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template>
            <div class="operation">
              <el-button type="text">下载</el-button>
              <el-button type="text" @click="isFinishedEditShow = true"
                >成品编辑</el-button
              >
              <el-button type="text" style="color: #666">自定义分组</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="record-pagination">
      <el-pagination
        @size-change="recordSizeChange"
        @current-change="recordCurrentChange"
        :current-page="page"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordTotal"
      >
      </el-pagination>
    </div>
    <!-- 在线发布 -->
    <div class="finished-product-issue">
      <el-dialog
        title="在线发布"
        :visible.sync="isIssueShow"
        width="45%"
        :close-on-click-modal="false"
      >
        <IssueChild
          ref="issueRef"
          @onVariantRemit="isVariantRemitShow = true"
        />

        <span slot="footer" class="dialog-footer">
          <el-button @click="isIssueShow = false">取 消</el-button>
          <el-button type="primary" @click="isIssueShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 汇出 -->
    <div class="finished-product-remit">
      <el-dialog
        title="成品汇出"
        :visible.sync="isRemitShow"
        width="45%"
        :close-on-click-modal="false"
      >
        <RemitChild ref="issueRef" />

        <span slot="footer" class="dialog-footer">
          <el-button @click="isRemitShow = false">取 消</el-button>
          <el-button type="primary" @click="isRemitShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 指定变体汇出 -->
    <div class="variant-remit">
      <el-dialog
        title="指定变体汇出"
        :visible.sync="isVariantRemitShow"
        width="45%"
        :close-on-click-modal="false"
      >
        <div class="variant-remit-box">
          <div class="variant-remit-box-table">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column label="图片" width="100">
                <template slot-scope="">
                  <!-- {{ scope.row.date }} -->
                  <div class="table-images">
                    <img
                      class="image-100"
                      src="https://img1.baidu.com/it/u=1875294847,3151489223&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                      alt=""
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="产品名称/类目/ID" width="220">
                <template slot-scope="">
                  <div class="table-category">
                    <div class="table-category-name">挂画-单幅1-1(DH)</div>
                    <div class="table-category-name">
                      类目: 工艺挂饰 / 墙饰 / 挂面
                    </div>
                    <div class="table-category-name">编号: GY09003117</div>
                    <div class="table-category-name">材质: Canvas</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="指定颜色尺码变体">
                <template slot-scope="">
                  <div class="table-colour">
                    <div class="table-colour-name">
                      <span>颜色</span>
                      <div class="table-colour-content">
                        <div class="table-colour-content-list">全选</div>
                        <div class="table-colour-content-list"></div>
                        <div class="table-colour-content-list"></div>
                      </div>
                    </div>
                    <div class="table-colour-name">
                      <span>尺码</span>
                      <div class="table-colour-content">
                        <div class="table-colour-content-list">全选</div>
                        <div class="table-colour-content-list">S</div>
                        <div class="table-colour-content-list">M</div>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isVariantRemitShow = false">取 消</el-button>
          <el-button type="primary" @click="isVariantRemitShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 成品编辑 -->
    <div class="finished-edit">
      <el-dialog
        title="成品编辑"
        :visible.sync="isFinishedEditShow"
        width="45%"
        :close-on-click-modal="false"
      >
        <FinishedEdit />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isFinishedEditShow = false">取 消</el-button>
          <el-button type="primary" @click="isFinishedEditShow = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import IssueChild from './common/issue.vue';
import RemitChild from './common/remit.vue';
import FinishedEdit from './common/finished-edit.vue';
import Finish from '@/api/finish';
import { mapActions } from 'vuex';

export default {
  name: 'recordChild',
  components: { IssueChild, RemitChild, FinishedEdit },
  props: {
    productId: {
      type: String,
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {
      keyword: '', // 关键词
      timeData: '', // 时间
      batchData: [
        {
          value: 1,
          label: '批量下载图片',
        },
        {
          value: 2,
          label: '批量编辑',
        },
        {
          value: 3,
          label: '批量自定义分组',
        },
        {
          value: 4,
          label: '批量清除分组',
        },
        {
          value: 5,
          label: '批量删除',
        },
      ],
      batchValue: '', // 批量操作
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      page: 1, // 当前页
      pageSize: 15, // 当前数量
      // 在线发布是否显示
      isIssueShow: false,
      // 汇出是否显示
      isRemitShow: false,
      // 指定变体汇出
      isVariantRemitShow: false,
      // 成品编辑
      isFinishedEditShow: false,
      recordData: [], // 数据列表
      recordTotal: 0, // 数据总数
    };
  },
  computed: {
    // 时间快捷选择
    pickerOptions() {
      return this.$store.state.layout.pickerOptions;
    },
  },
  watch: {},
  created() {
    this.getFinishList();
    // this.$store.dispatch('product/productStoreList');
    this.productStoreList();

    this.productTemplateList();
  },
  methods: {
    ...mapActions('product', ['productStoreList', 'productTemplateList']),
    recordSelectionChange(val) {},
    recordSizeChange(val) {
      this.pageSize = val;
      this.getFinishList();
    },
    recordCurrentChange(val) {
      this.page = val;
      this.getFinishList();
    },
    // 获取产品列表
    getFinishList() {
      const that = this;
      const params = {
        page: that.page,
        limit: that.pageSize,
        start_time: that.timeData[0],
        end_time: that.timeData[1],
        cate_id: that.productId,
      };
      Finish.getFinishList(params).then((res) => {
        console.log(res);
        let rows = res.data.rows;
        rows.forEach((oi) => {
          oi.img = JSON.parse(oi.img);
        });
        if (res.code == 200) {
          that.recordData = rows;
          that.recordTotal = res.data.total;
        }
      });
    },
    onset() {
      const { value } = this.$refs.issueRef;
      console.log(value);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/collect-material-product.less';

.record {
  // 按钮
  .record-btns {
    padding-top: 24px;
    .el-select {
      margin-left: 12px;
    }
  }
  // 数据列表
  .record-table {
    padding-top: 24px;

    // 产品信息
    .product-information {
      .product-information-name {
        display: flex;
        color: #999;

        span {
          display: inline-block;
          width: 120px;
          color: #00091a;
        }
      }
    }
    // 产品图片
    .product-image {
      display: flex;
      flex-wrap: wrap;

      .product-image-list {
        margin-right: 4px;
        margin-bottom: 4px;
        width: 60px;
        height: 60px;
      }
    }

    // 操作
    .operation {
      display: flex;
      flex-direction: column;

      .el-button {
        margin-left: unset;
      }
    }
  }

  // 分页
  .record-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }

  // 指定变体汇出
  .variant-remit {
    .variant-remit-box {
      .variant-remit-box-table {
        .table-images {
          width: 80px;
          height: 80px;
        }
      }
      .table-colour {
        .table-colour-name {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .table-colour-content {
            display: flex;
            padding-left: 10px;

            .table-colour-content-list {
              border: 1px solid #ebebeb;
              border-radius: 10px;
              margin-left: 6px;
              text-align: center;
              width: 60px;
              font-size: 12px;
              height: 25px;
              line-height: 25px;
              background-color: #fff;

              &:nth-child(2) {
                background-color: pink;
              }
            }
          }
        }
      }
    }
  }
}
</style>
